<template>
  <div class="evaluate-view-container px-4 pt-4">
    <div class="card pb-6">
      <div class="card-title">
        <h4 class="m-0 p-0">基本信息</h4>
      </div>
      <div class="px-5">
        <div class="base-info-item">
          <p>面试者</p>
          <p>{{ base_reportInfo.name }}</p>
        </div>

        <div class="base-info-item">
          <p>应聘ID</p>
          <p>{{ base_reportInfo.id }}</p>
        </div>

        <div class="base-info-item">
          <p>面试时间</p>
          <p>{{ reportInfo.startTime }}</p>
        </div>

        <div class="base-info-item">
          <p>面试官</p>
          <p>{{ reportInfo.interviewers.join(",") }}</p>
        </div>

        <div class="base-info-item">
          <p>面试纪要</p>
          <a style="color: #436bff" :href="meetRecordUrl">查看纪要</a>
        </div>
      </div>
    </div>

    <EmptyInfo v-if="is_empty" />
    <div v-else>
      <div
        class="card"
        v-for="(sessionData, index) in reportInfo.estimates"
        :key="sessionData.id"
      >
        <div class="card-title justify-between">
          <div class="flex flex-row items-center">
            <h4 class="m-0 p-0">{{ (sessionData && sessionData.evaluation) || "" }}</h4>
          </div>
          <van-icon
            :name="visibleStatusArr[index] ? 'arrow-down' : 'arrow-up'"
            @click="changeVisibleStatus(index)"
          />
        </div>
        <div class="px-6 pb-6" v-show="!visibleStatusArr[index]">
          <div
            v-show="sessionData.data"
            class="chart-container"
            :id="'chartId' + sessionData.id"
          ></div>
          <markdown :content="sessionData && sessionData.report" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, computed, defineProps } from "vue";
import { useInterviewStore } from "@/store";
import markdown from "@/components/markdown.vue";
import * as echarts from "echarts";
import EmptyInfo from "./EmptyInfo.vue";

const interviewStore = useInterviewStore();
const chartData = ref([]);
const visibleStatusArr = ref([]);

const props = defineProps({
  reportInfo: {
    type: Object,
    required: true,
    default: {},
  },
});

onMounted(() => {
  nextTick(() => {
    loadData();
  });
});

const base_reportInfo = computed(() => {
  return interviewStore.reportInfo;
});

const is_empty = computed(() => {
  if (!props.reportInfo.estimates) return true;
  return props.reportInfo.estimates?.length <= 0;
});

const meetRecordUrl = computed(
  () => `${import.meta.env.VITE_BASE_API}/hp/${props.reportInfo.confId}`
);

function loadData() {
  const { estimates } = props.reportInfo;
  if (!estimates) return;
  if (estimates.length === 0) return;
  visibleStatusArr.value = [];
  for (let i = 0; i < estimates.length; i++) {
    visibleStatusArr.value.push(false);
    const info = estimates[i];
    var myChart = echarts.init(document.getElementById("chartId" + info.id));
    let values = [];
    let indicator = [];
    if (!info.data) {
      continue;
    }
    for (const item of info.data) {
      const { name, value } = item;
      if (name.indexOf("--") === -1) {
        let name2 = name + parseInt(value) + "分";
        name2 = name2.replace(/(.{7})/g, "$1\n");
        values.push(parseInt(value));
        indicator.push({ name: name2, max: 10 });
      }
    }

    myChart.setOption({
      radar: {
        indicator: indicator,
        radius: 80,
        splitNumber: 4,
        axisName: {
          formatter: "{value}",
          color: "#595959",
        },
      },
      splitArea: {
        areaStyle: {
          color: ["#ECF0FF"],
        },
      },
      series: [
        {
          name: "Budget vs spending",
          type: "radar",
          data: [
            {
              value: values,
              name: "Allocated Budget",
              areaStyle: {
                color: "rgba(235, 237, 243, 1)",
              },
            },
          ],
        },
      ],
    });
  }
}

function changeVisibleStatus(index) {
  const originValue = visibleStatusArr.value[index];
  visibleStatusArr.value[index] = !originValue;
}
</script>

<style scoped>
.card {
  font-size: 14px;
  margin-bottom: 16px;
  border-radius: 4px;
  color: #262626;
  border: 0.5px solid #e9e9e9;
}

.card-title {
  background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%);
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 56px;
  padding: 20px;
  font-weight: 500;
}

.gradient-yellow {
  background: linear-gradient(180deg, #fcf9f2 0%, #ffffff 100%);
}

.evaluate-title {
  margin-top: 20px;
  margin-bottom: 8px;
  font-weight: 500;
}

.container {
  width: 100%;
  margin-bottom: 40px;
}

.base-info-item {
  display: flex;
  flex-direction: row;
  margin-bottom: 8px;

  :nth-child(1) {
    width: 60px;
    margin-right: 20px;
    color: #8c8c8c;
  }

  :nth-child(2) {
    color: #262626;
  }
}

.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.list-leave-active {
  position: absolute;
}

.chart-container {
  width: 100%;
  height: 270px;
}
</style>
